<template>
	<div class="device">
		<div class="top-content">
			<div class="top-content-font">
				<div class="top-content-title">
					<div class="title-icon">
						<img src="../../static/img/test01.png" alt="">
					</div>
					<div class="top-content-title-font">
						{{$t("navModel.service")}}
					</div>
				</div>
				<div class="top-content-nav">
					<div class="nav-icon">
						<img src="../../assets/images/po.png" alt="">
					</div>
					<div class="nav-name nav-hone" @click="$router.push('/')">
						{{$t("navModel.home")}}
					</div>
					<div class="separation"></div>
					<div class="nav-name">
						{{$t("navModel.service")}}
					</div>
				</div>
				<div class="placeholders"></div>
			</div>
		</div>
		<div class="contetn-box">
			<div class="subtitle subtitles" style="visibility: hidden">
				<span>PRE SALE / IN SALE / AFTER SALE</span>
			</div>
			<div class="contetn-box-title">
				售前/售中/售后
			</div>
			<div class="after-sales-box">
				<div class="after-sales-list">
					售前
				</div>
				<div class="after-sales-list">
					售中
				</div>
				<div class="after-sales-list">
					售后
				</div>
			</div>
			<div class="subtitle subtitles">
				<span>SERVICE MESSAGE</span>
			</div>
			<div class="contetn-box-titles">
				服务留言
			</div>
			
		</div>
	</div>
</template>

<script>
	export default {
		name: "serviceIdea",
		data() {
			return {
				isUpAndDown: 0
			};
		},
		methods: {
			scrolling() {
				var scrollTop = document.documentElement.scrollTop
				var scroll = scrollTop - this.isUpAndDown;
				this.isUpAndDown = scrollTop;
				console.log("scrollTop", scrollTop)
				var deviceList = document.querySelectorAll(".device-list-box");
				if (scroll < 0) {

				} else {

				}
			},
			titleAnimation() {
				// 本页标题
				var topContentTitle = document.querySelector(".top-content-title");
				topContentTitle.style.visibility = "visible"
				topContentTitle.style.animation = "fadeInLeft 0.6s linear"
				var topContentNav = document.querySelector(".top-content-nav");
				topContentNav.style.visibility = "visible"
				topContentNav.style.animation = "fadeInRight 0.6s linear"
				var placeholders = document.querySelector(".placeholders");
				placeholders.style.visibility = "visible"
				placeholders.style.animation = "fadeInRight 0.6s linear"
				// 内容标题
				var subtitle = document.querySelector(".subtitles");
				subtitle.style.visibility = "visible"
				subtitle.style.animation = "fadeInUp 0.6s linear"
				var titleName = document.querySelector(".contetn-box-title");
				titleName.style.visibility = "visible"
				titleName.style.animation = "fadeInUp 0.6s linear"
				// 内容
				// var aboutLeft = document.querySelector(".about-left");
				// aboutLeft.style.visibility = "visible"
				// aboutLeft.style.animation = "fadeInLeft 0.5s linear"
				// var aboutRight = document.querySelector(".about-right");
				// aboutRight.style.visibility = "visible"
				// aboutRight.style.animation = "fadeInRight 0.5s linear"

			}
		},
		mounted() {
			window.addEventListener("scroll", this.scrolling);
			this.titleAnimation()
		},

	}
</script>

<style scoped>
	/* 售后 */
	.after-sales-box{
		display: flex;
		width: 100%;
		background-image: url('../../static/img/kefu01.png');
		background-color: rgba(0, 0, 0, 0.6);
		background-size: cover;
		background-position: center;
		margin: 20px 0;
		font-family: Fy;
	}
	.after-sales-list{
		width: calc(100% / 3);
		height: 400px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.2);
	}
	.after-sales-list:nth-child(2){
		border-left: #fff solid 1px;
		border-right: #fff solid 1px;
	}
	/*  */
	.contetn-box {
		padding: 20px;
		overflow: hidden;
	}

	.contetn-box-title {
		font-size: 40px;
		font-family: Fy;
		height: 50px;
		visibility: hidden;
	}

	/*  */
	.top-content {
		width: 100%;
		height: 350px;
		background-image: url('../../static/img/kefu01.png');
		background-color: rgba(0, 0, 0, 0.6);
		background-size: cover;
		background-position: center;
		position: relative;
	}

	.top-content-font {
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 0 0 20px 30px;
	}

	.top-content-title {
		color: rgba(255, 255, 255, 0.8);
		font-size: 40px;
		font-weight: 600;
		font-family: Fy;
		margin-bottom: 20px;
		display: flex;
		padding: 0 10px;
	}

	.title-icon img {
		width: 90px;
		height: 49px;
	}

	.top-content-title-font {
		line-height: 66px;
		margin-left: 10px;
		height: 49px;
	}

	.top-content-nav {
		display: flex;
		align-items: center;
		font-family: Fy;
		padding: 0 10px;
	}

	.separation {
		width: 4px;
		height: 4px;
		background-color: #000;
		margin: 0 10px;
		border-radius: 50%;
	}

	.nav-name {
		font-size: 18px;
		color: rgba(0, 0, 0, 0.6);
	}

	.nav-hone {
		color: #000;
	}

	.nav-hone:hover {
		cursor: pointer;
	}

	.nav-icon img {
		width: 20px;
		margin-right: 10px;
	}

	.placeholders {
		width: 100%;
		height: 2px;
		margin: 10px 0;
		background-color: #000;
	}
</style>
